<template>
  <div class="charts_container">
    <slot></slot>
    <div id="handleMatter" class="charts_content">
      <div class="nodata" v-if="!data || !data.length">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      required: true
    }
  },
  watch: {
    data(newv) {
      this._initCharts()
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      if(!this.data || !this.data.length) {
        return
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("handleMatter"))
      
      
      const names = []
      const lineColors = ['#D8AC29', '#B85906', '#29B6A8', '#7F29FF', '#367DDC']
      const chartsData = [5]
      const dateList = []
      for(let i=0;i<this.data.length;i++) {
        names.push(this.data[i].communityName)
        chartsData[i] = [this.data[i].processingStatisticDetailDtoList.length]
        for(let j=0;j<this.data[i].processingStatisticDetailDtoList.length;j++) {
          chartsData[i][j]=this.data[i].processingStatisticDetailDtoList[j].count
          dateList[j] = this.data[i].processingStatisticDetailDtoList[j].time
        }
      }
      
      const option = {
          title: {
              text: '(件)',
              top: '0%',
              textStyle:{
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.12),
            },
          },
          grid: {
              top: '20%',
              left: '20%',
              bottom: '20%',
              right: '10%',
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              show: false,
              data: names,
              align: 'left',
              left: '16%',
              textStyle:{
                color:'#fff',  //坐标的字体颜色
                fontSize: this.$options.filters.fontSize(0.12),
              },
              icon: 'react',
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 2,
          },
          toolbox: {
              show: false,
              feature: {
                  dataZoom: {
                      yAxisIndex: 'none'
                  },
                  dataView: {readOnly: false},
                  magicType: {type: ['line', 'bar']},
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              data: dateList,
              axisLine:{
            lineStyle:{
              color:'transparent',  //坐标轴的颜色
            },
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                textStyle:{
                  color:'#fff',  //坐标的字体颜色
                  fontSize: this.$options.filters.fontSize(0.12),
                },
                axisTick: {
                  show: false
                }
              },
          },
          yAxis: {
            type: 'value',
            // name: '（十件）',
            axisTick: {
                show: false
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.12),
            },
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: 'rgba(255,255,255,0.4)'
                }
            },
            axisLabel: {textStyle:{
              color: '#fff',  //坐标的字体颜色
              fontSize: this.$options.filters.fontSize(0.12),
            },
                formatter: '{value}'
            },
            axisLine:{
              lineStyle:{
                color:'transparent',  //坐标轴的颜色
              },
            },
          },
          series: [
              {
                name: names[0],
                type: 'line',
                // symbol: 'circle',
                symbolSize: 0,
                color:lineColors[0],
                lineStyle: {
                  color: lineColors[0]
                },
                data: chartsData[0],
                
              },
              {
                  name: names[1],
                  type: 'line',
                  // symbol: 'circle',
                  symbolSize: 0,
                  color:lineColors[1],
                  lineStyle: {
                    color: lineColors[1]  
                  },
                  data: chartsData[1],
                
              },        
              {
                  name: names[2],
                  type: 'line',
                  // symbol: 'circle',
                  symbolSize: 0,
                  color:lineColors[2],
                  lineStyle: {
                    color: lineColors[2]
                  },
                  data: chartsData[2],
                
              },
              {
                name: names[3],
                type: 'line',
                // symbol: 'circle',
                symbolSize: 0,
                color:lineColors[3],
                lineStyle: {
                  color: lineColors[3]
                },
                data: chartsData[3],
              },
              {
                name: names[4],
                type: 'line',
                // symbol: 'circle',
                symbolSize: 0,
                color:lineColors[4],
                lineStyle: {
                  color: lineColors[4]  
                },
                data: chartsData[4],
              },
              
              
          ]
      };







      // 绘制图表
      myChart.setOption(option)

    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
.charts_content {
  margin-top: 5px;
  width: 100%;
  height: calc(100% - 37px);
}
</style>